<!doctype html>



  


<html class="theme-next muse use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"/>




  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">



<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=0.5.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="天生DR,DR" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=0.5.0" />






<meta name="description" content="我跑啊跑啊跑 为的就是赶上那个被寄予厚望的自己">
<meta property="og:type" content="website">
<meta property="og:title" content="天生DR">
<meta property="og:url" content="http://www.dr17.me/">
<meta property="og:site_name" content="天生DR">
<meta property="og:description" content="我跑啊跑啊跑 为的就是赶上那个被寄予厚望的自己">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="天生DR">
<meta name="twitter:description" content="我跑啊跑啊跑 为的就是赶上那个被寄予厚望的自己">




<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 0,
      author: 'Author'
    }
  };
</script>

  <title> 天生DR </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="">

  








  
  
    
  

  <div class="container one-collumn sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">天生DR</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">当上帝亲吻大地的时候于是DR出现了 他是上帝赐予人类最好的礼物</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu ">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-home fa-fw"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-archive fa-fw"></i> <br />
            
            Archives
          </a>
        </li>
      

      
      
      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">

    

    
    

    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2016/02/21/beijingnews/" itemprop="url">
                  北京晚报
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-02-21T23:00:29+08:00" content="Feb 21 2016">
              Feb 21 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/个人情感/" itemprop="url" rel="index">
                    <span itemprop="name">个人情感</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="北京晚报">北京晚报</h3>
<audio controls="controls" autoplay="autoplay"><br>  <source src="http://7xiuhk.com1.z0.glb.clouddn.com/beijingnews.mp3" type="audio/mp3" loop="true"><br></audio>

<p>当夜幕降临在我的城市<br>有另外一种人的生活即将开始<br>他们白天睡懒觉<br>也不用去上班<br>所以晚上睡不着在家太无聊<br>不喜欢看电视<br>也不爱上网<br>因为都是看得见摸不着的假象<br>到底哪儿才有真的<br>我想要找个尖的<br>闲着也是闲着就别耽误时间了<br>出了门儿<br>约哥们儿商量去哪儿透透气儿<br>单身的自由属于成年的光棍儿<br>都露着大腿 踩着高跟儿 飘着香味儿<br>漂亮的大妞儿<br>一个比一个够劲儿<br>知道你一人儿想要跟你聊会儿<br>跟你逗个闷儿你也根本琢磨不过味儿<br>一会儿咱们换个地儿<br>找个Old Dirty饭馆儿告诉你点事儿</p>
<p>北京晚报,有人征婚有人打广告, 其实就是吹牛逼和想操<br>北京晚报,太多的人在家里犯傻逼都睡不着, 我根本不要<br>北京晚报,有人喝酒有人吃High药, 喜欢散德行还不爱带套儿<br>北京晚报,老家儿都叫我夜猫子因为只有天黑了才出来造</p>
<p>但是到了后半夜<br>情况有所改变<br>因为恶狼太多了肥羊有限<br>剩下一大帮老爷们儿互相看不份儿<br>非要给这个喝醉的晚上来点儿火药味儿<br>于是有人出手 有人逃走<br>有人搂着残的妞儿<br>喝着假的洋酒<br>看了一出戏<br>两个没出息的大傻逼<br>让其他人看乐子<br>自己发脾气<br>把妞都吓跑了<br>自己也傻了<br>酒吧老板报了警那我也只能闪了<br>上了瓷的车<br>再卷一个去兜风<br>从二环到三环都不会堵车<br>无数的霓虹灯照亮我的世界<br>不管多晚桑拿洗浴他妈都会营业<br>红白蓝的车灯照亮了整条大街<br>但是对于这些他永远装看不见</p>
<p>北京晚报,有人在找有人在照, 打架多数还是人多的欺负人少<br>北京晚报,有人睡地下通道, 有人公款吃喝国家给报销<br>北京晚报,有人迟到有地儿验尿, 危险就在身边玩儿的就是心跳<br>北京晚报,北京会越来越热闹, 但我们再也找不回从前的味道</p>
<p>深更半夜<br>照样有人拼命在工作<br>老人走在大街<br>捡路人喝剩的瓶子<br>喝多的 被花的 要饭的 疯的傻的<br>可怜还是骗人根本分不清真的假的<br>从平时到周末 谁出来都想要收获<br>最低消费驻场三陪<br>哪儿妞儿多哪儿醉过<br>奸商在捣鬼<br>有钱人玩儿的到位<br>漂亮女孩儿总在干杯很快被灌醉<br>臭鼠霉趁天黑挂警备狐假虎威<br>酒吧夜总会的门前领导的车辆成群结队<br>厕所里躲着戏果儿<br>洋酒就着鸭脖儿<br>小明星大模特儿<br>陪着老逼坐在雅座儿<br>巡逻的警车东北的皮条客<br>女大学生很多学生证儿不能打折<br>北京还在建设但是人已经变了<br>这所有的一切究竟谁应该来负责</p>
<p>北京晚报,病了您得吃药, 可是医药费太贵了没人给你报销<br>北京晚报,挂羊头卖狗肉, 太多神经病和大傻逼进大学当教授<br>北京晚报,欠的钱我不还因为学校收学费都是为了骗钱<br>北京晚报,妞儿的屁股不够翘, 想当明星那都得先被导演操</p>
<p>很多人每天都看北京晚报<br>他们老说有些国家大事儿你必须得知道<br>我怀疑这些消息可不可靠<br>我不想关心谁的照片儿登上了头条<br>我听说洗衣粉放进油条<br>我听说马嘉爵和911<br>我听说动物园的猴儿自己跑了<br>我听了一堆废话他妈自己也快疯了<br>我离开了市中心<br>心里还是太燥<br>屋里做了隔音可是邻居还是嫌吵<br>出门儿才发现垃圾筒里的北京晚报<br>上边儿都印满了广告<br>谁死了<br>他妈这事儿与我无关<br>我只想看看哪个小妞儿最性感<br>谁当上领导这事儿谁爱管谁管<br>谁中了五百万谁整天没钱<br>只有臭傻逼整天找私人侦探调查婚外恋<br>其实出租司机也不愿意没事儿带您瞎转<br>只有每天四五点钟<br>听见街上喊着北京晚报<br>终于感到了北京的亲切</p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2016/02/17/React_Native_iOS_Pt/" itemprop="url">
                  React Native 中宽度单位
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-02-17T14:21:29+08:00" content="Feb 17 2016">
              Feb 17 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/React-Native/" itemprop="url" rel="index">
                    <span itemprop="name">React Native</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>[TOC]</p>
<p>  在上一篇文章 <a href="http://dr17.me/2016/02/15/mobile_px_ppi/" target="_blank" rel="external">移动开发像素之谜</a>中已经讲过了<code>dpi</code>,<code>ppi</code>,<code>dp</code>,<code>px</code>,<code>pt</code>,<code>sp</code> 等概念，并且也列出了PPI的计算公式，那在真实的<code>React Native</code> （因为本人主要做<code>iOS</code>开发，所以大部分列子也是以<code>iOS</code>为标准）既然抛弃了原有的布局，那么采用FlexBox是以什么单位决定的呢？</p>
<hr>
<p>我们先看一下iPhone的尺寸<br><img src="../images/iPhone_Screen.jpg" alt="iphone_screen"></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line"><span class="string">'use strict'</span>;</div><div class="line">import React, {</div><div class="line">  AppRegistry,</div><div class="line">  Component,</div><div class="line">  StyleSheet,</div><div class="line">  Text,</div><div class="line">  View,</div><div class="line">  PixelRatio,</div><div class="line">  Dimensions,</div><div class="line">} from <span class="string">'react-native'</span>;</div><div class="line"></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">first</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>{</div><div class="line">  render() {</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;View style={styles.container}&gt;</div><div class="line"></div><div class="line">         &lt;Text style={styles.welcome}&gt;</div><div class="line">               window.width={Dimensions.get(<span class="string">'window'</span>).width + <span class="string">'\n'</span>}</div><div class="line">               window.height={Dimensions.get(<span class="string">'window'</span>).height + <span class="string">'\n'</span>}</div><div class="line">               pxielRatio={PixelRatio.get()}</div><div class="line">         &lt;/Text&gt;</div><div class="line">      &lt;/View&gt;</div><div class="line">    );</div><div class="line">  }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">const</span> styles = StyleSheet.create({</div><div class="line">  container: {</div><div class="line">    flex: <span class="number">1</span>,</div><div class="line">    justifyContent: <span class="string">'center'</span>,</div><div class="line">    alignItems: <span class="string">'center'</span>,</div><div class="line">    backgroundColor: <span class="string">'#F5FCFF'</span>,</div><div class="line">  },</div><div class="line">  welcome: {</div><div class="line">    fontSize: <span class="number">20</span>,</div><div class="line">    textAlign: <span class="string">'center'</span>,</div><div class="line">    margin: <span class="number">10</span>,</div><div class="line">  },</div><div class="line">  instructions: {</div><div class="line">    textAlign: <span class="string">'center'</span>,</div><div class="line">    color: <span class="string">'#333333'</span>,</div><div class="line">    marginBottom: <span class="number">5</span>,</div><div class="line">  },</div><div class="line">});</div><div class="line"></div><div class="line">AppRegistry.registerComponent(<span class="string">'first'</span>, () =&gt; first);</div></pre></td></tr></table></figure>

<p><img src="../images/iphone6simu.jpg" alt="iphone6simu"></p>
<hr>
<p>可以看到iphone 6(s)的宽度为 375pt，对应了上边的375，由此可见react的单位为pt。<br>那如何获取实际的像素尺寸呢？ 这对图片的高清化很重要，如果我的图片大小为100 x 100 px. 设置宽度为100 x 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 x pixelRatio的大小 。</p>
<h3 id="总结">总结</h3>
<hr>
<p>React Native 宽度基于<code>pt</code>为单位。<br>可以通过Dimensions 来获取宽高（相当于原生开发中的<code>[[UIScreen mainScreen] bounds].size</code>）。<br>PixelRatio(低昂当与原生开发中的<code>[[UIScreen mainScreen] scale]</code>) 获取密度。</p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2016/02/16/Flex/" itemprop="url">
                  Flex布局 以及React Native中相关知识点
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-02-16T15:56:29+08:00" content="Feb 16 2016">
              Feb 16 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/React-JS/" itemprop="url" rel="index">
                    <span itemprop="name">React JS</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
<h3 id="一-Flex布局是什么？">一.Flex布局是什么？</h3>
<hr>
<p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。<br>任何一个容器都可以指定为Flex布局。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>行内元素也可以使用Flex布局。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> inline-flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>Webkit内核的浏览器，必须加上-webkit前缀。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> -webkit-flex</span></span>; <span class="comment">/* Safari */</span></div><div class="line">  <span class="rule"><span class="attribute">display</span>:<span class="value"> flex</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p>
<h3 id="二、基本概念">二、基本概念</h3>
<hr>
<p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p>
<p><img src="../images/flex001.png" alt="flex001"></p>
<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。<br>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p>
<h3 id="三、容器的属性">三、容器的属性</h3>
<hr>
<p>以下6个属性设置在容器上。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">flex-direction</span></div><div class="line"><span class="attribute">flex-wrap</span></div><div class="line"><span class="attribute">flex-flow</span></div><div class="line"><span class="attribute">justify-content</span></div><div class="line"><span class="attribute">align-items</span></div><div class="line"><span class="attribute">align-content</span></div></pre></td></tr></table></figure>

<h4 id="3-1_flex-direction属性">3.1 flex-direction属性</h4>
<p><code>flex-direction</code>属性决定主轴的方向（即项目的排列方向）。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-direction</span>:<span class="value"> row | row-reverse | column | column-reverse</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex002.png" alt="flex002"></p>
<p>它可能有4个值。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">row（默认值）：主轴为水平方向，起点在左端。</div><div class="line">row-<span class="built_in">reverse</span>：主轴为水平方向，起点在右端。</div><div class="line">column：主轴为垂直方向，起点在上沿。</div><div class="line">column-<span class="built_in">reverse</span>：主轴为垂直方向，起点在下沿。</div></pre></td></tr></table></figure>

<h4 id="3-2_flex-wrap属性">3.2 flex-wrap属性</h4>
<p>默认情况下，项目都排在一条线（又称”轴线”）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</p>
<p><img src="../images/flex003.png" alt="flex003"></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span><span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-wrap</span>:<span class="value"> nowrap | wrap | wrap-reverse</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>它可能取三个值。<br>（1）<code>nowrap</code>（默认）：不换行。</p>
<p><img src="../images/flex004.png" alt="flex004"></p>
<p>（2）<code>wrap</code> ：换行，第一行在上方。</p>
<p><img src="../images/flex005.jpg" alt="flex005"></p>
<p>（3）<code>wrap-reverse</code>：换行，第一行在下方。</p>
<p><img src="../images/flex006.jpg" alt="flex006"></p>
<h4 id="3-3_flex-flow">3.3 flex-flow</h4>
<p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="class">.box</span> <span class="rules">{  <span class="rule"><span class="attribute">flex-flow</span>:<span class="value"> &lt;flex-direction&gt; || &lt;flex-wrap&gt;</span></span>;</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<h4 id="3-4_justify-content属性">3.4 justify-content属性</h4>
<p><code>justify-content</code>属性定义了项目在主轴上的对齐方式</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.box {</div><div class="line">  justify-content: flex-<span class="operator"><span class="keyword">start</span> | flex-<span class="keyword">end</span> | center | <span class="keyword">space</span>-<span class="keyword">between</span> | <span class="keyword">space</span>-around;</span></div><div class="line">}</div></pre></td></tr></table></figure>

<p><img src="../images/flex007.png" alt="flex007"></p>
<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">flex-<span class="operator"><span class="keyword">start</span>（默认值）：左对齐</span></div><div class="line">flex-<span class="keyword">end</span>：右对齐</div><div class="line">center： 居中</div><div class="line"><span class="keyword">space</span>-<span class="keyword">between</span>：两端对齐，项目之间的间隔都相等。</div><div class="line"><span class="keyword">space</span>-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</div></pre></td></tr></table></figure>

<h4 id="3-5_align-items属性">3.5 align-items属性</h4>
<p><code>align-items</code>属性定义项目在交叉轴上如何对齐。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">fel</span><span class="class">.box</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">align-items</span>:<span class="value"> flex-start | flex-end | center | baseline | stretch</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex008.png" alt="flex008"></p>
<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">flex</span>-start：交叉轴的起点对齐。</div><div class="line"><span class="attribute">flex</span>-end：交叉轴的终点对齐。</div><div class="line"><span class="value">center</span>：交叉轴的中点对齐。</div><div class="line"><span class="value">baseline</span><span class="value">: 项目的第一行文字的基线对齐。</span></div><div class="line">stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</div></pre></td></tr></table></figure>

<h4 id="3-6_align-content属性">3.6 align-content属性</h4>
<p><code>align-content</code> 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.box {</div><div class="line">  align-content: flex-<span class="operator"><span class="keyword">start</span> | flex-<span class="keyword">end</span> | center | <span class="keyword">space</span>-<span class="keyword">between</span> | <span class="keyword">space</span>-around | stretch;</span></div><div class="line">}</div></pre></td></tr></table></figure>

<p><img src="../images/flex009.png" alt="flex009"><br>该属性可能取6个值。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="bullet">* </span>flex-start：与交叉轴的起点对齐。</div><div class="line"><span class="bullet">* </span>flex-end：与交叉轴的终点对齐。</div><div class="line"><span class="bullet">* </span>center：与交叉轴的中点对齐。</div><div class="line"><span class="bullet">* </span>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</div><div class="line"><span class="bullet">* </span>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</div><div class="line"><span class="bullet">* </span>stretch（默认值）：轴线占满整个交叉轴。</div></pre></td></tr></table></figure>

<h3 id="四、项目的属性">四、项目的属性</h3>
<hr>
<p><code>flex-grow</code>属性定义项目的放大比例，默认为<code>0</code>，即如果存在剩余空间，也不放大。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"> <span class="attribute">order</span></div><div class="line"> <span class="attribute">flex-grow</span></div><div class="line"> <span class="attribute">flex-shrink</span></div><div class="line"> <span class="attribute">flex-basis</span></div><div class="line"> <span class="attribute">flex</span></div><div class="line"> <span class="attribute">align-self</span></div><div class="line">}</div></pre></td></tr></table></figure>

<h4 id="4-1_order属性">4.1 order属性</h4>
<hr>
<p><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">order</span>:<span class="value"> &lt;integer&gt;</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex010.png" alt="flex010"></p>
<h4 id="4-2_flex-grow属性">4.2 flex-grow属性</h4>
<hr>
<p><code>flex-grow</code>属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-grow</span>:<span class="value"> &lt;number&gt;</span></span>; <span class="comment">/* default 0 */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex011.png" alt="flex011"></p>
<p>如果所有项目的<code>flex-grow</code>属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的<code>flex-grow</code>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
<h4 id="4-3_flex-shrink属性">4.3 flex-shrink属性</h4>
<hr>
<p><code>flex-shrink</code>属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-shrink</span>:<span class="value"> &lt;number&gt;</span></span>; <span class="comment">/* default 1 */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex012.jpg" alt="flex012"></p>
<p>如果所有项目的<code>flex-shrink</code>属性都为1，当空间不足时，都将等比例缩小。如果一个项目的<code>flex-shrink</code>属性为0，其他项目都为1，则空间不足时，前者不缩小。<br>负值对该属性无效。</p>
<h4 id="4-4_flex-basis属性">4.4 flex-basis属性</h4>
<hr>
<p><code>flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间<code>（main size）</code>。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为<code>auto</code>，即项目的本来大小。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex-basis</span>:<span class="value"> &lt;length&gt; | auto</span></span>; <span class="comment">/* default auto */</span></div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p>它可以设为跟<code>width</code>或<code>height</code>属性一样的值（比如350px），则项目将占据固定空间。</p>
<h4 id="4-5_flex属性">4.5 flex属性</h4>
<hr>
<p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">flex</span>:<span class="value"> none | [ &lt;<span class="string">'flex-grow'</span>&gt; &lt;<span class="string">'flex-shrink'</span>&gt;? || &lt;<span class="string">'flex-basis'</span>&gt; ]</span></span></div><div class="line">}</div></pre></td></tr></table></figure>

<p>该属性有两个快捷值：<code>auto (1 1 auto)</code> 和 <code>none (0 0 auto)</code>。<br>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
<h4 id="4-6_align-self属性">4.6 align-self属性</h4>
<hr>
<p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为<code>auto</code>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="class">.item</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">align-self</span>:<span class="value"> auto | flex-start | flex-end | center | baseline | stretch</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></td></tr></table></figure>

<p><img src="../images/flex013.png" alt="flex013"></p>
<p>该属性可能取6个值，除了<code>auto</code>，其他都与<code>align-items</code>属性完全一致。<br>（完）<br>注：以上均来自阮一峰的博客，这里只是做了搬运工，并无任何修改 原文链接如下<br><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="external">阮一峰博客</a></p>
<hr>
<h2 id="我是分割线">我是分割线</h2>
<h3 id="React_Native中Flex布局">React Native中Flex布局</h3>
<p>React Native 的flex布局，是web的阉割版本，目前还不支持<br><code>flex-shrink</code>、<code>flex-basis</code>、<code>order</code>几种flex属性，同时现有支持的flex属性值也不全。</p>
<p>以后在开发过程当中会及时补充…….</p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2016/02/15/mobile_px_ppi/" itemprop="url">
                  移动开发像素之谜
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-02-15T15:21:29+08:00" content="Feb 15 2016">
              Feb 15 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/移动开发/" itemprop="url" rel="index">
                    <span itemprop="name">移动开发</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="初探">初探</h2>
<p>  做移动设计和开发的同学，不管是原生app或者web app，应该对字体字号都是很头痛的问题。根本原因是，我们用唯一分辨率的电脑，设计各个不同尺寸大小分辨率的设备，那简直要疯掉了。 我们一般会碰到的度量单位主要有：dpi、ppi、dp、sp、px、pt、in。其中，px应该各位最熟悉的单位，也是我们主要使用的photoshop或者axure等工具用的度量单位，而它在移动端时，的确已经“过时”了。但不要着急把它丢掉，因为它是接下来非常重要的换算单位（所有手机参数还是用px在表达）。</p>
<p>dpi和ppi这两个是密度单位，不是度量单位，而这两个恰恰是我们换算中重要的分母。简单理解一下：</p>
<p><strong> ppi (pixels per inch)：图像分辨率 （在图像中，每英寸所包含的像素数目）</strong></p>
<p><strong> dpi (dots per inch): 打印分辨率 （每英寸所能打印的点数，即打印精度）</strong></p>
<p><strong> dp = dip : device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个，不依赖像素。</strong></p>
<p><strong> px: pixels(像素). 不同设备显示效果相同，一般我们HVGA代表320x480像素，这个用的比较多。</strong></p>
<p><strong> pt: point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；</strong></p>
<p><strong> sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。</strong></p>
<p>我们在移动应用中提到ppi和dpi其实都一样（概念不同，但对设计来讲没有特别需要深入了解），所以我们先忽略掉dpi。而ppi的运算方式是：</p>
<p>PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数</p>
<p>举个简单的栗子，iphone5的ppi是多少？ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）.这样大家就能够明白ppi和px的关系。</p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2016/01/18/js_webView_enable/" itemprop="url">
                  JS调用WebView的一个小坑
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2016-01-18T15:21:29+08:00" content="Jan 18 2016">
              Jan 18 2016
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/iOS/" itemprop="url" rel="index">
                    <span itemprop="name">iOS</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>2015-05-18</p>
<ul>
<li>上周六来公司加班 发现一个问题 js前端有个需求 带有搜索功能的页面已进入 键盘就要成为第一响应者  <br> </li>
</ul>
<p><strong> 前端代码 </strong><br></p>
<p>   <code>document.querySelector(&#39;input&#39;).focus()</code></p>
<pre><code>但是很不幸，该WebView必须经过touch过，貌似此函数才生效，于是翻了下<span class="built_in">UIWebView</span>的文档 发现有个属性
</code></pre><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">KeyboardDisplayRequiresUserAction</div></pre></td></tr></table></figure>

<p><code>@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0);// default is YES</code></p>
<pre><code>所以设置完毕后，即可正常生效，小坑之一，备注一下~~~
</code></pre><p>2016-02-03 追加备注<br>    上次在群里有人向我咨询H5的Video标签，设置了autoplay属性后  UIWebview没有自动播放，原因是</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">	mediaPlaybackRequiresUserAction <span class="keyword">Property</span></div><div class="line">A Boolean value that determines whether HTML5 videos can play automatically <span class="keyword">or</span> <span class="keyword">require</span> the user <span class="keyword">to</span> start playing them.</div><div class="line"></div><div class="line">Declaration</div><div class="line">OBJECTIVE-C</div><div class="line">@<span class="keyword">property</span>(nonatomic) BOOL mediaPlaybackRequiresUserAction</div><div class="line">Discussion</div><div class="line">The <span class="keyword">default</span> value <span class="keyword">on</span> both iPad <span class="keyword">and</span> iPhone <span class="keyword">is</span> YES. <span class="keyword">To</span> make media play automatically when loaded, <span class="keyword">set</span> this <span class="keyword">property</span> <span class="keyword">to</span> NO <span class="keyword">and</span> <span class="keyword">ensure</span> the &lt;audio&gt; <span class="keyword">or</span> &lt;video&gt; element you want <span class="keyword">to</span> play <span class="keyword">has</span> the autoplay attribute <span class="keyword">set</span>.</div><div class="line"></div><div class="line">Availability</div><div class="line">Available <span class="keyword">in</span> iOS <span class="number">4.0</span> <span class="keyword">and</span> later.</div></pre></td></tr></table></figure>


          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2015/12/31/2015_end/" itemprop="url">
                  无题（味全）
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2015-12-31T14:56:29+08:00" content="Dec 31 2015">
              Dec 31 2015
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/个人生活/" itemprop="url" rel="index">
                    <span itemprop="name">个人生活</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="算是序吧">算是序吧</h3>
<ul>
<li>不要问我为什么是这个标题，因为自打小学以来，我最害怕便是给作文起题目了，因为老师说过，一个好的题目会让你的作文令人眼前一亮，得到一个好分数，但我觉得文章更重要的是内容，所以题目一般都比较普通，以致于作文分数并没有多么突出。毕业了，当写代码开始后，又为了变量起名，函数命名纠结了很久，看过一句话：最好的注释就是没有注释，别人看命名就能知晓一切，我觉得这句话挺对的，中国有句古话叫“大繁至简”，感觉这里有种异曲同工之妙~回到正题，我为什么在无题后边又加了味全，因为此时此刻在火车窗户旁放了一瓶味全，还有就是这一年过得五味杂陈，对就酱，我最喜欢双关了~</li>
</ul>
<p><img src="http://dr17.me/images/weiquan.jpg" alt="味全"></p>
<ul>
<li>因为晚上要去听B哥的跨年演唱会，肯定会错过大波的感概总结潮，一般都是要忆往昔，看今朝，最后在展望一下未来，虽然我觉得这些都很俗套，但是我觉得成长的很大一部分在于迎合了大家已认可的，做个普通人没什么不好。</li>
</ul>
<h3 id="忆往昔">忆往昔</h3>
<ul>
<li><p>年初，我和遥远的她分手了，我们的小恩爱时长也停留在了750天。两年多的时光里，有欢声笑语，有争吵眼泪，我从来没有那么深入的去和一个女孩子相处那么久，也从来没有把心交给过另外一个人，但是她做到了，而且即使分开了，每每想起以前的岁月，嘴角能扬起那一丝微笑，足矣~</p>
</li>
<li><p>来去哪儿也一年了，清明自己去了上海，端午和同事们一起去了成都，九寨，见了一些认识很久但没有见过的人，以前发短信也要精简语言，因为超过70字就要算两条，到现在发个几千字的微信都不收费，世界变了，但是变大了还是变小了，我还真不好说，如鱼饮水，冷暖自知吧。</p>
</li>
</ul>
<h4 id="参加了三个足球杯赛">参加了三个足球杯赛</h4>
<ul>
<li><strong>去哪儿联赛</strong> ：去哪儿足球联赛，酒店事业部勇夺桂冠，离不开场上每一位队员的努力，并且决赛是在0：1落后的情况下奋起直追，最终3：1逆转夺冠，希望来年可以再次卫冕！</li>
<li><strong>京超</strong> ：相比去年受伤病和状态影响的板凳坐穿，今年策哥给了我主力左边前卫的位置，但担当防守的任务更多一些，表现中规中矩，没有进球没有助攻，但AC联队相比去年的悲情淘汰，今年小组出线比起去年已是不小的进步，淘汰赛首轮点球惜败，只能说运气不在我们这一边，不怕，来年再战！</li>
<li><strong>网络安全杯</strong> ：因为和京超的冲突，前几场比赛我错过了，后来参加的比赛两胜一负，3，4名决赛由于人员不齐，弃赛最后获得了第四名，相比去年又进了一步。</li>
</ul>
<ul>
<li>其实足球的魅力不在于能进多少球，能过多少人，而在于在不同团队里，怎么去找准自己的位置，肩负相应的责任，团结一切可以团结的力量，不停地突破自己和团队能达到的地步，在不停的探索中和逆境中，体会足球带给我们的乐趣，同时也到达了强身健体的效果。</li>
</ul>
<h3 id="看今朝">看今朝</h3>
<ul>
<li>今年过完年，胖了十五斤，长高了一公分，脸越来越大了~</li>
</ul>
<h3 id="展未来">展未来</h3>
<h5 id="2016的愿望">2016的愿望</h5>
<ul>
<li>工作中做出一些成就</li>
<li>找到女朋友</li>
<li>凑得房子首付</li>
<li>练好左脚起球 射门</li>
<li>每一天开开心心的</li>
</ul>
<p>对，我就是恋旧的人，所以写的东西旧东西很多~略困，去补觉了，2015即将过去，祝大家在新的一年里身体健康，事业有成，最重要的又有一颗好心情，每天都开开心心的！</p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2015/02/25/AOP/" itemprop="url">
                  AOP初体验
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2015-02-25T15:21:29+08:00" content="Feb 25 2015">
              Feb 25 2015
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/编程思想/" itemprop="url" rel="index">
                    <span itemprop="name">编程思想</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <ul>
<li>在软件业，AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。</li>
</ul>
<h2 id="AOP与OOP的区分">AOP与OOP的区分</h2>
<ul>
<li>AOP、OOP在字面上虽然非常类似，但却是面向不同领域的两种设计思想。OOP（面向对象编程）针对业务处理过程的实体及其属性和行为进行抽象封装，以获得更加清晰高效的逻辑单元划分。<br>而AOP则是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。这两种设计思想在目标上有着本质的差异。<br>上面的陈述可能过于理论化，举个简单的例子，对于“雇员”这样一个业务实体进行封装，自然是OOP/OOD的任务，我们可以为其建立一个“Employee”类，并将“雇员”相关的属性和行为封装其中。而用AOP设计思想对“雇员”进行封装将无从谈起。<br>同样，对于“权限检查”这一动作片断进行划分，则是AOP的目标领域。而通过OOD/OOP对一个动作进行封装，则有点不伦不类。<br>换而言之，OOD/OOP面向名词领域，AOP面向动词领域。</li>
</ul>
<h2 id="AOP与OOP的关系">AOP与OOP的关系</h2>
<ul>
<li>很多人在初次接触 AOP 的时候可能会说，AOP 能做到的，一个定义良好的 OOP 的接口也一样能够做到，我想这个观点是值得商榷的。AOP和定义良好的 OOP 的接口可以说都是用来解决并且实现需求中的横切问题的方法。但是对于 OOP 中的接口来说，它仍然需要我们在相应的模块中去调用该接口中相关的方法，这是 OOP 所无法避免的，并且一旦接口不得不进行修改的时候，所有事情会变得一团糟；AOP 则不会这样，你只需要修改相应的 Aspect，再重新编织（weave）即可。 当然，AOP 也绝对不会代替 OOP。核心的需求仍然会由 OOP 来加以实现，而 AOP 将会和 OOP 整合起来，以此之长，补彼之短。</li>
</ul>
<h2 id="AOP_For_Objective-C">AOP For Objective-C</h2>
<h3 id="实现原理">实现原理</h3>
<ul>
<li>用Objective-C强大的runtime.<br>我们知道当给一个对象发送一个方法的时候, 如果当前类和父类都没实现该方法的时候就会走转发流程<br>动态方法解析 -&gt; 快速消息转发 -&gt; 标准消息转发<br>迷茫的同学请搜 “Objective-C 消息转发”.<br>了解了消息转发,那么我们aop的思路就来了,我们是先干掉原本的方法funa,这样当给对象发送方法的时候就会走转发流程,我们再hook了对象的快速消息转发方法,把实现funa的对象指成我们的aop对象, 最后在aop对象的标准消息转发里执行before instead after方法.</li>
</ul>
<p>例子代码已放到 github <a href="https://github.com/Dronaldo17/AOP" target="_blank" rel="external">我是传送门</a> </p>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2015/02/25/from0to1/" itemprop="url">
                  Producter - 让产品从 0 到 1
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2015-02-25T15:21:29+08:00" content="Feb 25 2015">
              Feb 25 2015
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/设计模式/" itemprop="url" rel="index">
                    <span itemprop="name">设计模式</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <ul>
<li>首先感谢木木大神的送我的书 么么哒 </li>
<li>1.2.5.pdf  <a href="http://7u2ibm.com1.z0.glb.clouddn.com/producter_1.2.5.pdf" target="_blank" rel="external">我是传送门</a>   （持续更新）</li>
</ul>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2015/02/03/mangoDB/" itemprop="url">
                  MangoDB 初体验
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2015-02-03T14:21:29+08:00" content="Feb 3 2015">
              Feb 3 2015
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/数据库/" itemprop="url" rel="index">
                    <span itemprop="name">数据库</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <ul>
<li>写前边的话，一直以来都只是在做Mobile端的App，所用的数据库也只是SQLite，相对于当下流行的NOSQL，没时间也没有机会来接触，刚好最近再弄Node，前天搞定了http端简单的实现，其实如果想写server端最重要的无非是两个，一个网络，一个数据库，网络Node自带了http的moudle，那么数据库我打算采用mangoDB ，在Node的插件为mangoose，废话不多说，各位看官上眼吧</li>
</ul>
<h2 id="MangoDB简介">MangoDB简介</h2>
<ul>
<li>MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。</li>
<li>MongoDB是一个高性能，开源，无模式的文档型数据库，是当前NoSql数据库中比较热门的一种。  </li>
<li><p>MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bjson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。</p>
</li>
<li><p>传统的关系数据库一般由数据库（database）、表（table）、记录（record）三个层次概念组成，MongoDB是由数据库（database）、集合（collection）、文档对象（document）三个层次组成。MongoDB对于关系型数据库里的表，但是集合中没有列、行和关系概念，这体现了模式自由的特点。</p>
</li>
</ul>
<h2 id="特点">特点</h2>
<p>它的特点是高性能、易部署、易使用，存储数据非常方便。主要功能特性有：</p>
<ul>
<li><p>面向集合存储，易存储对象类型的数据。<br></p>
</li>
<li><p>模式自由。<br></p>
</li>
<li><p>支持动态查询。<br></p>
</li>
<li><p>支持完全索引，包含内部对象。<br></p>
</li>
<li><p>支持查询。<br></p>
</li>
<li><p>支持复制和故障恢复。<br></p>
</li>
<li><p>使用高效的二进制数据存储，包括大型对象（如视频等）。<br></p>
</li>
<li><p>自动处理碎片，以支持云计算层次的扩展性。<br></p>
</li>
<li><p>支持RUBY，PYTHON，JAVA，C++，PHP,C#等多种语言。<br></p>
</li>
<li><p>文件存储格式为BSON（一种JSON的扩展）。<br></p>
</li>
<li><p>可通过网络访问。<br></p>
</li>
</ul>
<h2 id="实操">实操</h2>
<ul>
<li>确定你的Mac已经安装了Node 如果没有安装 可以先去google 怎么安装了 </li>
<li>安装 mongodb  本文采用brew安装<br><br> 1） <code>brew install mongodb</code>  因为我已经安装过了 应该等待一会就会OK的 如果报错请自行google<br><br> <img src="/images/mongodb.png" alt="安装mongodb"><br> <br></li>
<li>安装 mongoose 我们采用全局安装模式 加上-g <br><br>  <code>sudo npm install -g mongoose</code></li>
<li>都安装成功后 我们查看下  mongodb的配置文件  路径应该为 <code>/usr/local/ect/mongod.conf</code> <br></li>
<li>简单查看一下配置文件的内容 <br><br><code>systemLog:
destination: file
path: /usr/local/var/log/mongodb/mongo.log
logAppend: true
storage:
dbPath: /usr/local/var/mongodb
net:
bindIp: 127.0.0.1</code></li>
</ul>
<ul>
<li><p>但是有可能此路径并不一定真正存在 需要手动创建 并赋予较高权限<br><br><code>sudo mkdir -p /data/db</code><br><br><code>sudo chmod 777 /data/db</code><br></p>
</li>
<li><p>这里当初我遇到一个坑 网上的教程说 需要执行 下边那个命令<br><br><code>mongod --dbpath /data/db/</code> <br><br>  <img src="/images/mongodb_1.png" alt="启动mongodb"><br><br>*此时mongo 已经正常启动 (以上任何步骤出错 本人概不负责 自行google 因为我也是个大菜B 刚开始鼓捣)</p>
</li>
</ul>
<h2 id="代码起来">代码起来</h2>
<p>`var mongoose = require(‘mongoose’);<br>mongoose.connect(‘mongodb://localhost/DRNodeTest’);<br>var iostojsSchema = new mongoose.Schema({<br>    title: { type: String }<br>    , name: String<br>    , easy: Boolean<br>    , workhard: Boolean<br>});</p>
<p>// Compile a ‘Movie’ model using the movieSchema as the structure.<br>// Mongoose also creates a MongoDB collection called ‘Movies’ for these documents.<br>var iostojs = mongoose.model(‘iostojs’, iostojsSchema);</p>
<p>var testObject = new iostojs({<br>    title: ‘从IOS转JS’,<br>    name:’窦静轩’,<br>    easy: false,<br>    workhard: true<br>});</p>
<p>testObject.save( function(error, data){<br>    if(error){<br>       console.log(“insert failed”);<br>    }<br>    else{<br>        console.log(“insert success”);<br>    }<br>});`<br><br><br>*在webstorm里看着很好看<br><br><img src="/images/mongodb_3.png" alt="启动mongodb"><br></p>
<ul>
<li>以上为Nodejs代码  可以创建个test.js  复制以上代码到js文件中  执行node test.js</li>
<li>在终端中 可以看到 检测到 插入新数据的过程 如下图所示<br><br><img src="/images/mongodb_2.png" alt="启动mongodb"><br><ul>
<li>我们选择一款可视化的工具  Robomongo  <a href="http://7u2ibm.com1.z0.glb.clouddn.com/Robomongo.dmg" target="_blank" rel="external">传送门在此</a><br><br><img src="/images/mongodb_5.png" alt="启动mongodb"><br></li>
</ul>
</li>
</ul>
<h2 id="结束语">结束语</h2>
<ul>
<li>作为一个新手 其实写这个就是为了记住自己做过的东西 相信我从IOS也不算是转JS 在同时学习JS的同时  作为丰富自己的步骤吧 大家一起加油  Node真的很有意思</li>
</ul>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2015/02/02/node_1/" itemprop="url">
                  无题 记于2015年2月1日
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2015-02-02T14:21:29+08:00" content="Feb 2 2015">
              Feb 2 2015
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/个人生活/" itemprop="url" rel="index">
                    <span itemprop="name">个人生活</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="定位的改变">定位的改变</h2>
<ul>
<li>现在的工作更多的要跟前端打交道了 不管以前我搞没搞过开发 但至少感觉是丰富自己的一个时期 当时离开天讯  离开幸福在线有很多的舍不得  更多的是在于倾注了自己已知的全部 或许我还很幼稚 很稚嫩  觉得这个不行 那个不行  但我觉得工作更多的是一种 感受和氛围吧  </li>
</ul>
<h2 id="一个月的工作感受">一个月的工作感受</h2>
<ul>
<li>来去哪儿一个多月了  总体感觉 这份工作很适合我 让我找回了 最初干开发时的那种 茫然感 对 茫然感  就像我最早写iOSApp的第一个公司项目时  喻强给我分配的任务是 搞定Three20 搞定静态库 这对于一个新手 无非是天大的困难（至少对于我来说是这样的） 搞定.a 很easy 随便google baidu一下 教程一大堆  可是 Three20 他的那个依赖使用 python 脚本搞得 这对于我一个菜鸟来说 感觉很有挑战性 而且还搞不定  每天回去也在看  在辉煌国际的那几个月 每天也是8，9点才回去 想想也是幸福 当一个员工 或者说当一个人自愿加班去丰富自己  为项目为公司为自己时  这个公司这个羡慕这个人才有希望 </li>
</ul>
<h2 id="信了在做要比做了再信好得多">信了在做要比做了再信好得多</h2>
<ul>
<li>信了再做要比做了再信 强得多</li>
</ul>
<h2 id="重拾Node">重拾Node</h2>
<ul>
<li><p>不是我不懂爱    而是世界变太快  软件行业尤其互联网软件行业的技术日新月异 每个月貌似都会有各种新技术 新语言 涌现出来  如果我是一名C或者C++的资深开发  可能会看不起那些只会在 Code4App Cocoachina github上down一些demo 用Storyboard 或者xib 或者更早的nib拖控件的iOS程序员 其实作为过来人 无论你从事哪门语言的开发 保持持久学习能力是工作当中很重要的一门技能 </p>
</li>
<li><p>WWDC 每年都会举行 Apple也是基本一年一手机 一年一个新的OS版本  更多的API开发还有你用的很习惯的API 废弃  整合思想 改变习惯 这些都很不爽 但是一入编程深似海 从此轻松是路人  但放眼望去 基本现在中国还有国际的互联网大咖  80%都是技术出身 我觉得以后不久的将来当一个CEO或者想在互联网有发展的任何人 高喊着“科技改变生活”自己却一点技术都不懂的话 我觉得有些痴人说梦 这种感觉好像 “你连世界都没有观过 哪来的世界观”的感觉  （已经一点半了 我脑子不清晰了 我都不知道我在说什么了）</p>
</li>
<li><p>以前写过Node 但貌似没写到成商业级别的  就写了几个小Demo  以前总是借口 忙 累 看着自己身边的朋友 都一个个开始创业 有的身价百万千万 而我发现自己工作 几年 却一分钱也没攒下来  我觉得需要深刻反思一下了</p>
</li>
<li><p>下午和洋小羊 讨论了一些事情 也想通了一些事情 有些事情 决定做了就不要拖沓 也不要找借口 把找借口省下来的时间和精力用来解决问题吧 骚年！我发现每年年底都会给自己制定目标，可是貌似都没有实现过，自制力，执行力！！！！</p>
</li>
<li><p>个人觉得Node 是非常有魅力的  很值得广大工程师去阅读 </p>
</li>
</ul>
<h3 id="关于熬夜">关于熬夜</h3>
<ul>
<li>下午在公司的微信群 大家展开了关于熬夜伤身体的讨论  在这奉劝广大互联网从业者 珍爱生命 拒绝熬夜  我今天是失眠了 写着写着就困了  晚安了 各位 我发现我现在写东西就是狗屎啊  毫无逻辑可言 大家姑且着看吧 也可能就我一个人再看 嘎嘎嘎  </li>
</ul>
<ul>
<li>我跑啊跑啊跑，为的就是赶上那个被寄予厚望的自己！！！</li>
</ul>

          
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
    </footer>
  </article>


    

  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel  sidebar-panel-active ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="http://7u2ibm.com1.z0.glb.clouddn.com/avatar.png"
               alt="窦静轩" />
          <p class="site-author-name" itemprop="name">窦静轩</p>
          <p class="site-description motion-element" itemprop="description">我跑啊跑啊跑 为的就是赶上那个被寄予厚望的自己</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">15</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>
          
          
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">12</span>
                <span class="site-state-item-name">categories</span>
              
            </div>
          

          
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">1</span>
                <span class="site-state-item-name">tags</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="icon-next-heart fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">窦静轩</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="http://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>



      </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  


  



  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>

  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=0.5.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=0.5.0"></script>



  
  

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=0.5.0"></script>



  



  



  
  

  
  


</body>
</html>
